<template>
	<view>
		<view class="bg-linear-ger" style="height: 250px;">
			<img class="pl-2 mt-5" src="static/logo.png" style="width: 287px;height: 68px;" />
		</view>
		<view class="bg-white rounded-top" style="position: relative; top: -100px">
			<view class="p-5 font text-FFC251 font-weight-bold-600">欢迎登录涉农端</view>
			<view class="pl-2 pr-2 lineHight-3">

				<view class="pl-3">
					<u-form :model="form" ref="uForm">
						<u-form-item required label="手机号" label-width="180" prop="phone">
							<u-input class="mr-3 " maxlength="11" placeholder="请输入手机号" v-model="form.phone"
								input-align="right" />
						</u-form-item>
						<u-form-item required label="验证码" label-width="180" prop="captcha">
							<u-input class="mr-3 " placeholder="请输入验证码" v-model="form.captcha" input-align="right" />
							<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
						</u-form-item>
					</u-form>
				</view>
				<!-- 		<u-field v-model="form.phone" label="手机号" placeholder="请输入手机号">
				</u-field>
				<u-field v-model="form.captcha" label="验证码" placeholder="输入验证码">
					<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
				</u-field> -->
				<u-toast ref="uToast"></u-toast>
				<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
					@change="codeChange"></u-verification-code>

				<view class="u-inline-block dfes">
					<u-checkbox v-model="agreementChecked" :label="true">我已阅读并同意</u-checkbox>
					<view class="text-primary" @click="open('login/serviceAgreement')">《服务协议》</view>
					<view class="text-primary" @click="open('login/serviceAgreement')">《隐私政策》</view>
				</view>
			</view>

			<view class="pl-3 pr-3 ">
				<u-button shape="circle" @click="verifyCaptchaClick" type="success">登录</u-button>
			</view>
			<!-- <view class="text-right pr-5 mt-4" @click="open('touristMode/index/index')">
				<u-icon name="google" color="#08C060" size="28"></u-icon>游客登录
			</view> -->
			<view class="text-center mt-3">
				<view class="font-13 text-999999 mt-2">其他登录方式</view>
				<view class=" m-2" @click="open('login/login')">
					<i class="p-1 iconfont icon-mima font-28 main-text-color border-s"></i>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	export default {
		data() {
			return {
				codeText: '',
				seconds: 60,
				agreementChecked: true, // 是否同意协议
				form: {
					phone: '',
					captcha: ''
				},
				rules: {
					phone: [{
							required: true,
							message: '手机号码不能为空',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								const reg = /^[0-9]*$/; // 只允许输入数字
								if (!reg.test(value)) {
									callback(new Error('请输入数字'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					],

					captcha: [{
							required: true,
							message: '验证码不能为空',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								const reg = /^[0-9]*$/; // 只允许输入数字
								if (!reg.test(value)) {
									callback(new Error('请输入数字'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					]
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			validatePhoneNumber(phoneNumber) {
				const regex = /^1\d{10}$/;
				return regex.test(phoneNumber);
			},
			getCode() {
				if (this.getCodeisWaiting) {
					return;
				}
				// 验证手机号码是否为空
				if (!this.form.phone) {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					});
					return;
				}
				// 隐藏键盘
				uni.hideKeyboard();
				this.getCodeText = "发送中...";
				this.getCodeisWaiting = true;
				let o = {
					phone: this.form.phone
				};

				// 发送请求获取验证码
				$H.get('/brand/user/agriculture/sendSms', o, {
						token: false
					})
					.then(res => {
						uni.hideLoading();
						if (!res.success || res.code != 200) {
							uni.showToast({
								title: res.message || '获取验证码失败',
								icon: 'error'
							});
							return;
						}
						if (this.$refs.uCode.canGetCode) {
							if (!this.validatePhoneNumber(this.form.phone)) {
								uni.showToast({
									title: "手机号码格式错误",
									icon: "error"
								});
								return;
							}
							uni.showLoading({
								title: '正在获取验证码'
							});
							setTimeout(() => {
								uni.hideLoading();
								this.$refs.uCode.start();
							}, 2000);
						} else {
							this.$u.toast('倒计时结束后再发送');
						}
					})
					.catch(error => {
						uni.showToast({
							title: "网络错误，请稍后再试",
							icon: 'none'
						});
					});
			},
			end() {
				this.$u.toast('倒计时结束');
				this.getCodeisWaiting = false;
				this.codeText = '重新获取';
			},
			start() {
				this.$u.toast('倒计时开始');
			},



			verifyCaptchaClick() {
				if (!this.agreementChecked) {
					uni.showToast({
						title: '请阅读并同意《服务协议》《隐私政策》',
						icon: 'none'
					});
					return;
				}

				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.captcha) {
							let o = {
								...this.form
							};
							$H.post('/brand/user/agriculture/phoneLogin', o, {
									token: false,
									header: {
										'Content-Type': 'application/x-www-form-urlencoded',
									}
								})
								.then(res => {
									let userInfo = res.result || {};
									if (res.success || res.code === 200) {
										uni.setStorageSync("token", res.result.token)
										uni.setStorageSync("userInfo", userInfo);
										uni.showToast({
											title: res.message,
											icon: 'none',
										});
										uni.switchTab({
											url: '/pages/tabbar/index/index'
										});
									} else if (res.code === 500) {
										uni.showToast({
											title: res.message,
											icon: 'none',
										});

									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
										});
									}
								})
								.catch(err => {
									uni.showToast({
										title: '网络错误，请稍后重试',
										icon: 'none'
									});
								});
						} else {
							uni.showToast({
								title: '验证码错误',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				})
			},



			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
		}
	};
</script>

<style scoped>
	canvas {
		border: 1px solid #cccccc;
	}

	input,
	button {
		margin-top: 10px;
	}

	.u-border-bottom:after {
		border-bottom: 1px solid #FFC251 !important;
	}
</style>